<template>
	<div>
		<div class="top">
			<div class="top-left">
				<img src="../img/bolema_logo_0923_white.png">
			</div>
			<div class="top-center">
				<Menu mode="horizontal" :theme="theme1" active-name="1">
					<MenuItem name="1">
					首页
					</MenuItem>
					<MenuItem name="2">
					班级
					</MenuItem>
					<MenuItem name="3">
					考试
					</MenuItem>
					<MenuItem name="4">
					课程
					</MenuItem>
					<MenuItem name="5">
					题库
					</MenuItem>
					<MenuItem name="6">
					上课
					</MenuItem>
					<MenuItem name="7">
					进度计划模板
					</MenuItem>
					<MenuItem name="8">
					进度计划管理
					</MenuItem>
				</Menu>
			</div>
			<div class="top-right">
				<div class="top-right-img">
					<img src="../img/202a4fbba07d4240801c43f8b49f9045.png">
				</div>
				<div class="top-right-content">
					<Dropdown style="margin-left: 20px">
						<Button type="primary">
							周大大
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<DropdownMenu slot="list">
							<DropdownItem>退出登录</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>
			</div>
		</div>
		<div class="center">
			<div class="center-top">
				<Input v-model="value" placeholder="请输入筛选的班级名称" style="width:10.875rem" />
				<Input v-model="value" placeholder="请输入筛选的教学进度计划名称" style="width:10.875rem" />
				<Input v-model="value" placeholder="请输入筛选的考试名称" style="width:10.875rem" />
				<Button type="primary">
					<Icon type="ios-search" />搜索</Button>
				<Button type="primary">
					<Icon type="ios-add" />添加考试</Button>
			</div>
			<div class="tubiao">
				<i class="ivu-icon ivu-icon-ios-pricetag-outline" style="font-size: 26px; cursor: pointer;"></i>
			</div>
			<div class="aaa">
				<div class="ivu-divider ivu-divider-horizontal ivu-divider-default ivu-divider-with-text-left" inner="true">
					<span class="ivu-divider-inner-text">数据列表</span></div>
			</div>
			<div class="table">
				<Table width="1150" border :columns="columns2" :data="data3"></Table>
			</div>
			<div class="bottom">
				<div class="bottom-text">点击图标&nbsp;<i class="ivu-icon ivu-icon-ios-pricetag-outline"></i>&nbsp;可以进行表格的表头的显示隐藏操作，记录操作到本地</div>
				<div class="page">
					 <Page :total="20" show-total show-sizer show-elevator />
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				theme1: 'primary',
				value: '',
				columns2: [{
						title: '考试名称',
						key: 'examname',
						width: 120,
						fixed: 'left'
					},
					{
						title: '班级名称',
						key: 'classname',
						width: 100
					},
					{
						title: '教学进度计划',
						key: 'plan',
						width: 150
					},
					{
						title: '考试时间',
						key: 'exmatime',
						width: 100
					},
					{
						title: '考试类型',
						key: 'examtype',
						width: 200
					},
					{
						title: '持续时间',
						key: 'continuetime',
						width: 100
					},
					{
						title: '考试状态',
						key: 'examstate',
						width: 100
					},
					{
						title: '更新人',
						key: 'upmen',
						width: 100
					},
					{
						title: '更新时间',
						key: 'uptime',
						width: 100
					},
					{
						title: '操作一',
						key: 'action',
						fixed: 'right',
						width: 130,
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									}
								}, '删除')
							]);
						}
					},
					{
						title: '操作二',
						key: 'action2',
						fixed: 'right',
						width: 230,
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									}
								}, '考试链接'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									}
								}, '考试规则'),
							]);
						}
					}
				],
				data3: [{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
					{
						examname: 'java练习',
						classname: '富强班',
						plan: '005教学',
						exmatime: '9:00',
						examtype: '开放考试',
						continuetime: '100分钟',
						examstate: '开始',
						upmen: '周大大',
						uptime: '2020-04-03',

					},
				]
			}
		},
		components: {

		},
		methods: {

		}
	}
</script>

<style scoped="scoped">
	@import url("../css/exam.css");
</style>
